<template>
  <div class="closed_details">
    <div class="closed_details_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">已关闭<i class="el-icon-close"></i></div>
    </div>
    <div class="closed_details_title">
      <div class="closed_details_title_left">已关闭/<i>订单详情</i></div>
      <div class="closed_details_title_right">
        <button class="closed_details_title_right_btn"
                @click="handerBase">返回</button>
      </div>
    </div>
    <div class="closed_details_content">
      <div class="closed_details_content_center">
        <div class="closed_details_content_center_left">
          <div class="top">
            <div class="closed_details_content_center_left_box">
              <div class="left">订单编号：</div>
              <div class="right">{{orderInfoData.order_code}}</div>
            </div>
            <div class="closed_details_content_center_left_box">
              <div class="left">付款方式：</div>
              <div class="right">{{orderInfoData.pay_type=='1'?'微信支付':orderInfoData.pay_type=='2'?'线下支付':''}}</div>
            </div>
            <div class="closed_details_content_center_left_box">
              <div class="left">买家：</div>
              <div class="right right_active">{{orderInfoData.username}}</div>
            </div>
            <div class="closed_details_content_center_left_box">
              <div class="left">配送方式：</div>
              <div class="right">{{orderInfoData.move_way=='1'?'快递':orderInfoData.move_way=='2'?'自提':''}}</div>
            </div>
            <div class="closed_details_content_center_left_box">
              <div class="left">收货人：</div>
              <div class="right"
                   id="content">{{orderInfoData.province}} {{orderInfoData.city}} {{orderInfoData.area}} {{orderInfoData.address}} {{orderInfoData.name}} {{orderInfoData.mobile}}</div>
              <font class="copyConsignee"
                    data-clipboard-target="#content"
                    @click="copyConsignee">复制</font>
            </div>
          </div>
          <div class="botton">
            <!-- <div class="botton_btn">修改订单收货信息</div> -->
          </div>
        </div>
        <div class="closed_details_content_center_right">
          <div class="closed_details_content_center_right_top">
            订单状态：<font>已关闭</font><i>（{{orderInfoData.finish_time | dateformat('YYYY-MM-DD HH:mm:ss')}}）</i>
          </div>
          <div class="closed_details_content_center_right_center">
            <i>添加备注</i>
          </div>
        </div>
      </div>
      <h3 class="table_text">商品信息</h3>
      <div class="closed_details_content_bottom">
        <table>
          <tr>
            <th style="width: 20%;">商品标题</th>
            <th style="width: 19%;">规格、编号、条码</th>
            <th style="width: 11%;">单价</th>
            <th style="width: 11%;">数量</th>
            <th style="width: 13%;">原价</th>
            <th style="width: 13%;">折扣后</th>
            <th style="width: 13%;">状态</th>
          </tr>
          <tr v-for="(v,i) in orderInfoData.product_lst"
              :key="i">
            <td style="width: 20%;">
              <div class="tab_img">
                <img class="tab_img" style="border:0;" :src="v.main_imgurl" alt="">
              </div>
              <div class="tab_right">
                <div class="tab_right_title">{{v.product_title}}</div>
                <!-- <div class="tab_right_invoice">支持开票</div> -->
              </div>
            </td>
            <td class="td_active"
                style="width: 19%;">
              <div class="tab_box">
                <div class="tab_box_content">
									规格：
									<template v-if="v.attr_params && v.attr_params.length">
										 <p class="tab_spec" v-for="(item,index) in v.attr_params" :key="index">
											<i>{{item.value}}</i>
										</p>
									 </template>
									 <template v-else>无</template>
								</div>
								<div class="tab_box_content">编码：{{v.specss?v.specss:' 无'}}</div>
								<div class="tab_box_content">条码：{{v.specsss?v.specsss:' 无'}}</div>
              </div>
            </td>
            <td style="width: 11%;">￥{{v.price}}</td>
            <td style="width: 11%;">{{v.num}}个</td>
            <td style="width: 13%;">￥{{v.primary_price}}</td>
            <td style="width: 13%;">￥{{v.pay_price}}</td>
            <td style="width: 13%;">{{v.order_status=='1'?'待付款':v.order_status=='2'?'待发货':v.order_status=='3'?'待收货':v.order_status=='4'?'已完成':'已关闭'}}</td>
          </tr>
        </table>
        	<div class="price">
					<div class="price_box">
						<div class="price_box_left">商品小计：</div>
						<div class="price_box_right">￥{{orderInfoData.price}}</div>
					</div>
					<div class="price_box">
						<span class="price_box_left">运费：</span>
						<span class="price_box_right">￥{{orderInfoData.move_price}}</span>
					</div>
           <div class="price_box">
            <div class="box-left">
              <span class="price_box_left price_active">总价：</span>
              <span class="price_box_right price_active">￥{{orderInfoData.price}}</span>
            </div>
            <div class="box-center">
              <span class="price_box_left price_active">已付定金：</span>
              <span class="price_box_right price_active">￥{{orderInfoData.deposit_price}}</span>
            </div>
            <div class="box-right" v-if="orderInfoData.is_many_way==1">
              <span class="price_box_left price_active">待付尾款：</span>
              <span class="price_box_right price_active">￥{{orderInfoData.balance_price}}</span>
            </div>
          </div>
				</div>
      </div>
    </div>
  </div>
</template>

<script>
import ClipboardJS from 'clipboard';

export default {
  data () {
    return {
      total: 0.00,							// 实付款
      freight: 0.00,						// 运费
      subtotal: 0.00,						// 小计
      changePrice: 0.00,					// 卖家改价
      completedList: [],
      orderInfoData: [],
      orderType: "", //订单类型 productPack-产品包订单
    }
  },
  mounted () {
    this.orderType = this.$route.query.type;
    this._getOrderInfo()
  },
  methods: {
    handerBase () {
      this.$router.go(-1);
    },
    // 实现复制功能
    copyConsignee () {
      // 括号中的内容：对应复制按钮的class
      let clipboard = new ClipboardJS('.copyConsignee');
      let that = this
      clipboard.on('success', function (e) {
		    that.$message.success('复制成功')
        console.log("复制成功");
        e.clearSelection();
      });
      clipboard.on('error', function (e) {
        console.log("复制失败，请重试");
        console.log(e)
      });
    },
    //获取传过来的order_id，获取商品详情
    _getOrderInfo () {
      console.log(this.$route);
      let order_id = this.$route.query.order_id;
      let store_id = localStorage.getItem('sid')
      let url = this.orderType == 'productPack'?'/api/admin/newpk/PackOrder/detail':'/api/admin/shop/productOrder/detail';
      this.$http.post(url, { order_id,store_id }).then(res => {
        console.log(res);
        if (res.code == 1) {
          this.orderInfoData = res.data ? res.data : [];
        }else{
          this.$message.warning(res.msg)
        }
      })
    }
  },
  // computed: {
  //   // 商品小计
  //   subtotalPrice () {
  //     this.completedList.filter(v => {
  //       this.subtotal += v.price;
  //     });
  //     return `${this.subtotal}.00`;
  //   },
  //   // 运费
  //   freightPrice () {
  //     this.completedList.filter(v => {
  //       this.freight += v.freight;
  //     })
  //     return `${this.freight}.00`
  //   },
  //   // 卖家改价
  //   changePrices () {
  //     for (let i = 0; i < this.completedList.length; i++) {
  //       this.changePrice += this.completedList[i].prices - this.completedList[i].pricess;
  //     }
  //     return `${this.changePrice}.00`;
  //   },

  //   // 实付款
  //   totalPrice () {
  //     this.completedList.filter(v => {
  //       this.total += v.pricess;
  //     });
  //     return `${this.total}.00`;
  //   }
  // },
}
</script>

<style lang="less" scoped="scoped">
@import "details.less";
</style>
